<template>
  <div class="userCount">
    <div class="countmain">
      <img src="../../assets/user.png" alt="" />
      <div class="inSchool">
        <span>在校生</span>
        <span class="total">{{ total }}</span>
      </div>
      <div class="leaveSchool">
        <span> 毕业生</span>
        <span class="total">{{total2}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { students,Graduate } from "@/api/api";
let total = ref('');
let total2 = ref('');
onMounted(() => {
  getData();
});
let getData = (params) => {
  students(params).then((res) => {
    console.log("111", res);
    console.log(res.data.data.list);
    console.log(res.data.data.total);
    if (res.data.code === 0) {
      //   Data.tableData = res.data.data.list;
      total.value = res.data.data.total;
      console.log("111");
    }
  });
  Graduate(params).then((res) => {
    if (res.data.code === 0) {
      //   Data.tableData = res.data.data.list;
      total2.value = res.data.total;
    }
  });
};
</script>

<style lang="less">
.countmain {
  //   position: relative;
  position: fixed;
  width: 85%;
  height: 700px;
  border-radius: 30px;
  // margin-top: 10px;
  margin: 10px auto;
  background-color: #fff;
  img {
    position: absolute;
    margin-top: 100px;
    left: 50px;
    background-color: #fff;
  }
  .inSchool {
    // position: absolute;
    display: inline-block;
    margin-top: 100px;
    margin-left: 30%;
    width: 500px;
    height: 200px;
    background-color: rgb(227, 221, 203);
    border-radius: 20px;
    span {
      display: block;
      font-size: 30px;
      margin-top: 40px;
      top: 20px;
    }
    .total {
      margin-bottom: 20px;
    }
  }
  .leaveSchool {
    display: flex;
    flex-direction: column;
    margin-top: 100px;
    margin-left: 48%;
    right: 150px;
    width: 500px;
    height: 200px;
    border-radius: 20px;
    background-color: rgb(227, 221, 203);
    span {
      margin-bottom: 20px;
      display: block;
      font-size: 30px;
      margin-top: 20px;
      top: 20px;
    }
    .total {
      margin-bottom: 20px;
    }
  }
}
</style>